<template>
  <Loading :loading="loading">
    <div class="content">
      <NavBar goUrl="/myOrder"></NavBar>
      <div class="center" v-if="obj">
        <!-- banner -->
        <div class="banner">
          <img class="banner-img" src="./img/banner.png" alt="" />
          <div class="baoxian">{{ obj.partnerName }}</div>
          <div class="chanpin">{{ obj.productName }}</div>
          <div class="dingdan">
            <span>订单号:{{ obj.orderNo }}</span>
            <img
              class="fuzhi"
              src="./img/fuzhi.png"
              alt=""
              :data-clipboard-text="obj.orderNo"
              @click="copyActiveCode('.fuzhi')"
            />
          </div>
          <div class="c-fmt7pc">
            <img :src="obj.policyStatusImgUrl" />
          </div>
        </div>
        <!-- 详情 -->
        <div class="detail">
          <div class="inline">
            <div class="title">保障开始时间</div>
            <div class="name">{{ obj.inceptionDateStart }}</div>
          </div>
          <div class="inline">
            <div class="title">保障结束时间</div>
            <div class="name">{{ obj.inceptionDateEnd }}</div>
          </div>
          <!-- 投保人 -->
          <van-collapse
            v-if="obj.appPolicyHolder"
            v-model="toubao"
            :border="false"
          >
            <van-collapse-item
              :border="false"
              class="beibao"
              :value="obj.appPolicyHolder.name"
            >
              <template #title>
                <div class="title">投保人</div>
              </template>
              <div class="inline">
                <div class="title">姓名</div>
                <div class="name">{{ obj.appPolicyHolder.name }}</div>
              </div>
              <div class="inline">
                <div class="title">性别</div>
                <div class="name">{{ obj.appPolicyHolder.sex }}</div>
              </div>
              <div class="inline">
                <div class="title">证件类型</div>
                <div class="name">{{ obj.appPolicyHolder.idType }}</div>
              </div>
              <div class="inline">
                <div class="title">证件号</div>
                <div class="name">{{ obj.appPolicyHolder.idNo }}</div>
              </div>
              <div class="inline">
                <div class="title">出生日期</div>
                <div class="name">{{ obj.appPolicyHolder.birthday }}</div>
              </div>
              <div class="inline">
                <div class="title">手机</div>
                <div class="name">{{ obj.appPolicyHolder.mobile }}</div>
              </div>
              <div class="inline">
                <div class="title">邮箱</div>
                <div class="name">{{ obj.appPolicyHolder.email }}</div>
              </div>
            </van-collapse-item>
          </van-collapse>
          <!-- 被保人 -->
          <van-collapse v-model="beibao" :border="false">
            <van-collapse-item
              :border="false"
              class="beibao"
              v-for="item in beibaoren"
              :key="item.index"
              :value="item.name"
            >
              <template #title>
                <div class="title">被保险人</div>
              </template>
              <div class="inline">
                <div class="title">姓名</div>
                <div class="name">{{ item.name }}</div>
              </div>
              <div class="inline">
                <div class="title">性别</div>
                <div class="name">{{ item.sex }}</div>
              </div>
              <div class="inline">
                <div class="title">与投保人关系</div>
                <div class="name">{{ item.relationTypeName }}</div>
              </div>
              <div class="inline">
                <div class="title">证件类型</div>
                <div class="name">{{ item.idType }}</div>
              </div>
              <div class="inline">
                <div class="title">证件号</div>
                <div class="name">{{ item.idNo }}</div>
              </div>
              <div class="inline">
                <div class="title">出生日期</div>
                <div class="name">{{ item.birthday }}</div>
              </div>
              <div class="inline">
                <div class="title">手机</div>
                <div class="name">{{ item.mobile }}</div>
              </div>
              <div class="inline">
                <div class="title">邮箱</div>
                <div class="name">{{ item.email }}</div>
              </div>
            </van-collapse-item>
          </van-collapse>
          <!-- 受益人 -->
          <van-collapse
            v-if="obj.isLegalBeneficiary === 'N'"
            v-model="shouyi"
            :border="false"
          >
            <van-collapse-item
              :border="false"
              class="beibao"
              v-for="item in shouyiren"
              :key="item.index"
              :value="item.name"
            >
              <template #title>
                <div class="title">受益人</div>
              </template>
              <div class="inline">
                <div class="title">姓名</div>
                <div class="name">{{ item.name }}</div>
              </div>
              <div class="inline">
                <div class="title">性别</div>
                <div class="name">{{ item.sex }}</div>
              </div>
              <div class="inline">
                <div class="title">与被保人关系</div>
                <div class="name">{{ item.relationTypeName }}</div>
              </div>
              <div class="inline">
                <div class="title">证件类型</div>
                <div class="name">{{ item.idType }}</div>
              </div>
              <div class="inline">
                <div class="title">证件号</div>
                <div class="name">{{ item.idNo }}</div>
              </div>
              <div class="inline">
                <div class="title">出生日期</div>
                <div class="name">{{ item.birthday }}</div>
              </div>
              <div class="inline">
                <div class="title">手机</div>
                <div class="name">{{ item.mobile }}</div>
              </div>
              <div class="inline">
                <div class="title">邮箱</div>
                <div class="name">{{ item.email }}</div>
              </div>
            </van-collapse-item>
          </van-collapse>
          <div v-else>
            <div class="inline">
              <div class="title">受益人</div>
              <div class="name">法定受益人</div>
            </div>
          </div>
        </div>
        <!-- 产品/险种 -->
        <div class="card" v-for="item in xianzhong" :key="item.index">
          <div class="top">
            <div class="picture">
              {{ item.prFlag === 'M' ? '主险' : '附加险' }}
            </div>
            <div
              class="product"
              :class="
                !(item.prFlag === 'M' && obj.isOnline === 'Y')
                  ? 'product-width'
                  : ''
              "
            >
              {{ item.riskName }}
            </div>
            <div
              class="chakan"
              v-show="item.prFlag === 'M' && obj.isOnline === 'Y'"
              @click="See(item)"
            >
              产品详情
            </div>
          </div>
          <div class="inline">
            <div class="title">保障期间</div>
            <div class="name">{{ item.insurancePeriodName }}</div>
          </div>
          <div class="inline">
            <div class="title">缴费频率</div>
            <div class="name">{{ item.payWayName }}</div>
          </div>
          <div class="inline">
            <div class="title">缴费期间</div>
            <div class="name">{{ item.payPeriodName }}</div>
          </div>
          <div class="inline">
            <div class="title">每期保费/元</div>
            <div class="name">{{ item.premium }}</div>
          </div>
          <div class="inline">
            <div class="title">保额/元</div>
            <div class="name">{{ item.sumAssured }}</div>
          </div>
        </div>
        <!-- 缴费信息 -->
        <div class="card" v-if="obj.appOrderPayPeriod">
          <div class="top">
            <div class="product">缴费信息</div>
          </div>
          <div class="inline">
            <div class="title">首期保费/元</div>
            <div class="name">{{ obj.appOrderPayPeriod.annualPrem }}</div>
          </div>
          <div class="inline">
            <div class="title">缴费频率</div>
            <div class="name">{{ obj.appOrderPayPeriod.payWayName }}</div>
          </div>
          <div class="inline">
            <div class="title">缴费期限</div>
            <div class="name">{{ obj.appOrderPayPeriod.payPeriodName }}</div>
          </div>
          <div class="inline">
            <div class="title">下次缴费时间</div>
            <div class="name">{{ obj.appOrderPayPeriod.nextPayDate }}</div>
          </div>
          <div class="inline">
            <div class="title">缴费方式</div>
            <div class="name">{{ obj.appOrderPayPeriod.payType }}</div>
          </div>
        </div>
        <!-- 联系方式 -->
        <div class="card" v-if="obj.appOrderReceiver">
          <div class="top">
            <div class="product">联系方式</div>
          </div>
          <div class="inline">
            <div class="title">手机</div>
            <div class="name">{{ obj.appOrderReceiver.receiverMobile }}</div>
          </div>
          <div class="inline">
            <div class="title">电子邮箱</div>
            <div class="name">{{ obj.appOrderReceiver.receiverEmail }}</div>
          </div>
          <div class="inline">
            <div class="title">省市</div>
            <div class="name">
              {{ obj.appOrderReceiver.receiverProvince }}省{{
                obj.appOrderReceiver.receiverCity
              }}市
            </div>
          </div>
          <div class="inline">
            <div class="title">详细地址</div>
            <div class="name">{{ obj.appOrderReceiver.receiverAddress }}</div>
          </div>
        </div>
        <!-- 查看电子保单 -->
        <div class="foot">
          <div class="select">
              <span style="position: relative; top: 2px;">查看</span>
              <!-- obj.electronicPolicyUrl -->
              <span
                v-if="obj.electronicPolicyUrl"
                class="color fuzhi2"
                :data-clipboard-text="obj.electronicPolicyUrl"
                @click="copyActiveCode('.fuzhi2')"
              >
                电子保单
              </span>
              <img
                v-if="obj.electronicPolicyUrl"
                class="fuzhi2"
                src="./img/copy.png"
                alt=""
                :data-clipboard-text="obj.electronicPolicyUrl"
              />
              <span class="line" v-if="obj.electronicPolicyUrl">|</span>
              <span
                v-if="obj.customerNotifyUrl"
                class="color fuzhi1"
                style="position: relative; top: 1px;"
                :data-clipboard-text="obj.customerNotifyUrl"
                @click="copyActiveCode1('.fuzhi1')"
              >
                客户告知书
              </span>
              <img
                v-if="obj.customerNotifyUrl"
                class="fuzhi1"
                src="./img/copy.png"
                alt=""
                :data-clipboard-text="obj.customerNotifyUrl"
                @click="copyActiveCode1('.fuzhi1')"
              />
              <span v-if="obj.customerNotifyUrl" class="line">|</span>
            <span class="color" @click="orderEn" style="position: relative; top: 2px;">订单附件</span>
            <!-- <img
              class="fuzhi1"
              src="./img/copy.png"
              alt=""
              :data-clipboard-text="obj.orderNo"
              @click="copyActiveCode('.fuzhi1')"
            /> -->
          </div>
          <div class="cankao">
            *该页面内容仅供参考,实际保单信息以保险公司保单为准
          </div>
        </div>
      </div>
    </div>
  </Loading>
</template>
<script>
import Clipboard from 'clipboard'
import NavBar from '@/components/h5header'
import API from '@/services/h5/my'
import Loading from '@/components/data-loading'
export default {
  components: { NavBar, Loading },
  data() {
    return {
      obj: null,
      beibaoren: [],
      shouyiren: [],
      xianzhong: [],
      toubao: [],
      beibao: [],
      shouyi: [],
      loading: false
    }
  },
  methods: {
    copyActiveCode(type) {
      const clipboard = new Clipboard(type)
      let that = this
      clipboard.on('success', function (e) {
        e.clearSelection()
        that.$toast('复制成功')
      })
    },
    copyActiveCode1(type) {
      const clipboard = new Clipboard(type)
      let that = this
      clipboard.on('success', function (e) {
        e.clearSelection()
        that.$toast('复制成功')
      })
    },
    copyActiveCode2(type) {
      const clipboard = new Clipboard(type)
      let that = this
      clipboard.on('success', function (e) {
        e.clearSelection()
        that.$toast('复制成功')
      })
    },
    getOrderDetail() {
      this.loading = true
      let params = {
        contractId: this.$route.params.id
      }
      API.orderDetail(params).then(res => {
        if (res.data && res.data.code === 1000) {
          this.obj = res.data.data
          this.beibaoren = res.data.data.appPolicyInsuredList
          this.xianzhong = res.data.data.appPolicyRiskList
          this.shouyiren = res.data.data.appPolicyBeneficiaryList
        }
        this.loading = false
      })
    },
    See(item) {
      window.location.href = item.productLink
    },
    select() {
      // console.log(111)
      // window.location.href = this.obj.electronicPolicyUrl
    },
    orderEn() {
      // parent.location.href = 'linkUrl.vue'
      this.$router.push({
        path: '/linkurl',
        query: { imgUrl: this.obj.attachmentList, id: this.$route.params.id }
      })
    }
  },
  created() {
    this.getOrderDetail()
  }
}
</script>
<style scoped lang="less">
.content {
  background-color: #fafafa;
  height: calc(100vh);
  overflow: scroll;
}
.banner {
  width: 375px;
  height: 130px;
  position: relative;
}
.banner-img {
  width: 375px;
  height: 130px;
}
.baoxian {
  position: absolute;
  top: 25px;
  left: 15px;
  font-size: 13px;
  color: #fff;
}
.chanpin {
  position: absolute;
  top: 53px;
  left: 15px;
  font-size: 19px;
  font-weight: bold;
  color: #fff;
}
.dingdan {
  position: absolute;
  bottom: 30px;
  left: 15px;
  font-size: 14px;
  color: #fff;
}
.fuzhi {
  width: 11px;
  height: 11px;
  margin-left: 6px;
}
.fuzhi1 {
  /* width: 11px;
  height: 11px; */
  width: 11px;
  vertical-align: middle;
}
.fuzhi2 {
  width: 11px;
  vertical-align: middle;
}
.orderImg {
  display: inline-block;
  width: 11px;
  height: 11px;
  line-height: 11px;
  margin-left: 4px;
  background: #f68657;
}
.detail {
  width: 345px;
  padding: 2px 15px 15px 15px;
  background-color: #fff;
}
.inline {
  display: flex;
  justify-content: space-between;
  margin-top: 13px;
}
.title {
  font-size: 13px;
  color: #999;
}
.name {
  font-size: 13px;
  color: #666;
}
.card {
  width: 345px;
  padding: 15px;
  background-color: #fff;
  margin-top: 13px;
  box-shadow: rgba(0, 0, 0, 0.05) 0 1px 2px 0;
}
.top {
  width: 100%;
  height: 17px;
  display: flex;
  align-items: center;
  position: relative;
}
.picture {
  width: 45px;
  height: 17px;
  background: url('./img/label.png') no-repeat;
  font-size: 10px;
  color: #fff;
  text-align: center;
  margin-right: 5px;
}
.picture img {
  width: 100%;
}
.product {
  width: 230px;
  font-size: 16px;
  line-height: 16px;
  font-weight: bold;
}
.product-width {
  width: 295px;
}
.chakan {
  position: absolute;
  right: 0;
  color: @c-color-primary;
  font-size: 14px;
}
.foot {
  width: 345px;
  padding: 15px;
  background-color: #fff;
  margin-top: 2px;
}
.select {
  font-size: 12px;
  color: #999;
}
.color {
  color: @c-color-primary;
  // margin-left: 10px;
}
.cankao {
  font-size: 12px;
  color: #999;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 14px;
  text-align: center;
}
.showContent {
  width: 100%;
  height: 20px;
}
.zhuanfa {
  color: @c-color-primary;
  font-size: 14px;
}
.line {
  margin: 0 5px;
}
/deep/.beibao .van-cell {
  padding: 0;
  margin-top: 13px;
}
/deep/.beibao .van-collapse-item__content {
  width: 295px;
  padding: 3px 15px 12px 15px;
  margin: 10px auto;
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px;
  border-radius: 10px;
}
.c-fmt7pc {
  position: absolute;
  right: 10px;
  top: 0;
  img {
    width: 101px;
    height: 80px;
  }
}
</style>
